<template>
	<div v-loading="loading">
		<el-row
			style="display: flex; align-items: center; flex-wrap: wrap"
			:style="{
				justifyContent: justifyContent,
				marginLeft: marginLeft,
				width: rowWidth,
			}"
		>
			<el-col
				v-for="(item, index) in blogData"
				:key="index"
				:span="span"
				:style="{
					marginBottom: marginBottom + 'vh',
					display: display,
					justifyContent: coljustifyContent,
				}"
			>
				<el-card
					shadow="hover"
					:style="{ width: width + 'px' }"
					@click="pushBlog(item.id, item.uploader)"
					class="hvr-shrink"
				>
					<template #header>
						<div
							class="card-header"
							style="display: flex; justify-content: center"
						>
							<el-text
								type="primary"
								size="small"
								truncated
								style="font-weight: bold"
								>{{ item.title }}</el-text
							>
						</div>
					</template>
					<div id="blog-cover">
						<el-image
							:src="item.cover"
							fit="fill"
							:style="{ width: width, height: width + 'px' }"
						></el-image>
						<div>
							<el-text
								size="small"
								truncated
								style="
									color: aliceblue;
									position: absolute;
									bottom: 5%;
									left: 5%;
									z-index: 2;
									width: 190px;
								"
								>{{ item.category }}</el-text
							>
						</div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup>
import { onBeforeMount, onMounted, toRefs, watch } from 'vue';
import getFile from '../utils/getAssetsFile.js';
import { useRouter } from 'vue-router';
const router = useRouter();

const props = defineProps({
	blogData: {
		default: {
			cover: null,
		},
	},
	span: {
		default: 8,
	},
	width: {
		default: 130,
	},
	marginBottom: {
		default: 2,
	},
	justifyContent: {
		default: 'flex-start',
	},
	marginLeft: {
		default: '0vw',
	},
	display: {
		default: 'flex',
	},
	coljustifyContent: {
		default: 'center',
	},
	rowWidth: {
		default: '75vw',
	},
});

const {
	blogData,
	span,
	width,
	marginBottom,
	justifyContent,
	marginLeft,
	display,
	coljustifyContent,
} = toRefs(props);
const loading = ref(true);

const pushBlog = (blogId, uploader) => {
	router.push({ path: '/blogPage', query: { blogId, uploader } });
};

watch(blogData, () => {
	for (let item of blogData.value) {
		if (!item.cover) {
			item.cover = getFile.getAssetsFile('img', '博客默认封面.png');
		}
	}
});

onBeforeMount(() => {
	if (blogData.value) {
		for (let item of blogData.value) {
			if (!item.cover) {
				item.cover = getFile.getAssetsFile('img', '博客默认封面.png');
			}
		}
		loading.value = false;
	} else {
		setTimeout(() => {
			for (let item of blogData.value) {
				if (!item.cover) {
					item.cover = getFile.getAssetsFile(
						'img',
						'博客默认封面.png'
					);
				}
			}
			loading.value = false;
		}, 1000);
	}
});
</script>

<style scoped>
:deep(.el-card__body) {
	padding: 2px !important;
}
:deep(.el-card__header) {
	padding: 10px !important;
}
#blog-cover {
	position: relative;
}
#blog-cover::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	bottom: 0;
	right: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0),
		rgba(0, 0, 0, 1)
	); /* 渐变背景色 */
}
</style>
